<template>
  <div class="newlogin">
    <!-- 背景区域 -->
    <div class="login-container">
      <!-- 登录区域 -->
      <div class="login_content" :class="{ active: isshow }">
        <div class="content_login">
          <!-- 登录设置 -->
          <h1 class="login_title">登 录</h1>
          <el-form :model="loginInfo" :rules="loginRules" ref="loginRuleRef">
            <el-form-item prop="managerid">
              <el-input
                placeholder="请输入用户名"
                v-model="loginInfo.managerid"
              >
              </el-input>
            </el-form-item>

            <el-form-item prop="passwd">
              <el-input
                placeholder="请输入密码"
                v-model="loginInfo.passwd"
                type="password"
                @keydown.enter="addloginBtn"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="clickBtn"
                size="small"
                type="primary"
                plain
                @click="addloginBtn"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 浮板区域 -->
      <div class="welcom_content" :class="{ active: isshow }">
        <div class="boxone">
          <div class="toppadding">
            <h1>你好!欢迎使用</h1>
            <p>“趣预约”</p>
            <p>后台管理系统</p>
            <div class="btns">
              <!-- <el-button size="large" type="info">注册</el-button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ApiLogin } from "../api/index";
import {
  successMessage,
  errorMessage,
  warnMessage,
} from "../utils/messageTips";
import { storageSession, storageLocal } from "@/storage/index";
import permissionRoute from "@/utils/permission";
import { useStore } from "vuex";
export default defineComponent({
  name: "loginform",

  setup() {
    const router = useRouter();
    const store = useStore();
    const ishow = true;
    // 登录字段
    let loginInfo = reactive<IGloginInfo>({
      managerid: "", //'HEKEJIAN',
      passwd: "", //"123456"
    });
    //  登录字段校验
    let loginRules = reactive<rules>({
      managerid: [
        {
          message: "登录名不能为空!!",
          required: true,
          trigger: "blur",
        },
        {
          min: 2,
          max: 30,
          message: "登录名长度必须在2到30位之间",
          trigger: "blur",
        },
      ],
      passwd: [
        {
          required: true,
          message: "密码不能为空",
          trigger: "blur",
        },
        {
          min: 4,
          max: 30,
          message: "密码位数至少大于4",
          trigger: "blur",
        },
      ],
    });

    //  登录区域操作
    let loginRuleRef = ref<HTMLFormElement | null>(null);
    const addloginBtn = () => {
      loginRuleRef.value?.validate(async (valid: any) => {
        if (valid) {
          console.log(loginInfo);
          let res = (await ApiLogin(
            loginInfo.managerid,
            loginInfo.passwd
          )) as any;
          console.log(res);
          if (res == 2) {
            storageSession.setItem("username", "校领导");
            store.commit("authority/SET_ROUTES", permissionRoute.masterRoutes);
            router.push("/");
          } else if (res == 1) {
            storageSession.setItem("username", "院领导");
            store.commit("authority/SET_ROUTES", permissionRoute.secondRoutes);
            router.push("/");
          } else {
            errorMessage("账号或者密码有误！！！");
          }
        } else {
          errorMessage("输入格式错误，请重新输入！！");
        }
      });
    };

    return {
      loginInfo,
      loginRules,
      addloginBtn,
      loginRuleRef,
    };
  },
});
</script>
<style lang="less" scoped>
.my-margin-bottom {
  margin-bottom: -100px;
}

.clickBtn {
  margin-left: 50%;
  transform: translateX(-50%);
}
.newlogin {
  position: relative;
  height: 380px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-container {
  border-radius: 25px;
  // opacity: 1;
  width: 50vw;
  height: 47vh;
  top: 10vh;
  left: 50vw;
}
.login_content {
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  width: 55%;
  transform: translateX(-100%);
  // background-color: rgb(18, 41, 85);rgb(37, 103, 97);
  // background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
  background-color: rgb(3,92,104);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transition: all 1s;
}
.content_login {
  height: 100%;
  width: 100%;

  .login_title {
    margin-top: 20%;
    text-align: center;
    color: #fff;
  }
}
.content_register {
  height: 100%;
  width: 100%;
  h1 {
    // margin-top: 20%;
    font-size: 14px;
    text-align: center;
    color: #fff;
  }
}
.welcom_content {
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 45%;
  // background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  // background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  background-color: rgb(0,145,132);
  border-bottom-left-radius: inherit;
  border-top-left-radius: inherit;
  border-right: none;
  transition: all 1s;
  .toppadding {
    margin-top: 70%;
    transform: translateY(-50%);
  }
}
.boxone {
  width: 100%;
  height: 100%;
  h1 {
    text-align: center;
    color: #fff;
  }
  p {
    text-align: center;
    font-size: 24px;
    color: #fff;
  }
}
.boxtwo {
  width: 100%;
  height: 100%;
  h1 {
    font-size: 20px;
    text-align: center;
    color: #fff;
  }
  p {
    text-align: center;
    font-size: 24px;
    color: rgb(135, 48, 161);
  }
}

.login_content.active {
  left: 0;
  transform: translateX(-0);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: inherit;
  border-top-left-radius: inherit;
  transition: all 1s;
}
.welcom_content.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}
/deep/.el-input__inner {
  // background-color: transparent;
  border: 1px solid rgb(207, 193, 193);
  border-right: none;
  color: #080808;
}
/deep/.el-input__inner::placeholder {
  color: #0a0a0a;
}
.btns {
  text-align: center;
}
.ridioItem {
  padding-left: 40px;
}
.el-radio {
  margin-left: 50px;
  margin-bottom: 10px;
}
.radioItem-color {
  color: rgb(14, 13, 13);
}
</style>
